<template>
  <div>
    <a-card title="免修限制设置" :bordered="false">
      <a-tabs defaultActiveKey="1">
        <a-tab-pane tab="课程→年级/专业限制" key="1">
          <div style="margin-bottom: 16px">
            <a-button type="primary" @click="handleAddCourseRestriction">新增限制</a-button>
          </div>
          <a-table
            :columns="courseColumns"
            :dataSource="courseData"
            :pagination="pagination"
            :loading="loading"
          >
            <span slot="action" slot-scope="text, record">
              <a @click="handleEditCourseRestriction(record)">编辑</a>
              <a-divider type="vertical" />
              <a @click="handleDeleteCourseRestriction(record)">删除</a>
            </span>
          </a-table>
        </a-tab-pane>
        <a-tab-pane tab="年级/专业→课程限制" key="2">
          <div style="margin-bottom: 16px">
            <a-button type="primary" @click="handleAddMajorRestriction">新增限制</a-button>
          </div>
          <a-table
            :columns="majorColumns"
            :dataSource="majorData"
            :pagination="pagination"
            :loading="loading"
          >
            <span slot="action" slot-scope="text, record">
              <a @click="handleEditMajorRestriction(record)">编辑</a>
              <a-divider type="vertical" />
              <a @click="handleDeleteMajorRestriction(record)">删除</a>
            </span>
          </a-table>
        </a-tab-pane>
      </a-tabs>
    </a-card>

    <a-modal
      :title="modalTitle"
      :visible="modalVisible"
      @ok="handleModalOk"
      @cancel="handleModalCancel"
      width="60%"
    >
      <a-form :form="form">
        <a-form-item label="课程" v-if="restrictionType === 'course'">
          <a-select
            v-decorator="['course', { rules: [{ required: true, message: '请选择课程' }] }]"
            placeholder="请选择课程"
          >
            <a-select-option v-for="course in courses" :key="course.id" :value="course.id">
              {{ course.name }} ({{ course.code }})
            </a-select-option>
          </a-select>
        </a-form-item>
        
        <a-form-item label="年级/专业" v-if="restrictionType === 'major'">
          <a-select
            v-decorator="['major', { rules: [{ required: true, message: '请选择年级/专业' }] }]"
            placeholder="请选择年级/专业"
          >
            <a-select-option v-for="major in majors" :key="major.id" :value="major.id">
              {{ major.grade }}级{{ major.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        
        <a-form-item label="限制对象">
          <a-select
            v-decorator="['target', { rules: [{ required: true, message: '请选择限制对象' }] }]"
            placeholder="请选择限制对象"
          >
            <a-select-option v-for="target in targets" :key="target.id" :value="target.id">
              {{ target.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        
        <a-form-item label="限制说明">
          <a-textarea
            v-decorator="['description']"
            placeholder="请输入限制说明"
            :rows="4"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
const courseColumns = [
  {
    title: '课程名称',
    dataIndex: 'courseName',
    key: 'courseName'
  },
  {
    title: '课程代码',
    dataIndex: 'courseCode',
    key: 'courseCode'
  },
  {
    title: '限制对象',
    dataIndex: 'target',
    key: 'target'
  },
  {
    title: '限制说明',
    dataIndex: 'description',
    key: 'description'
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' }
  }
]

const majorColumns = [
  {
    title: '年级/专业',
    dataIndex: 'major',
    key: 'major'
  },
  {
    title: '限制课程',
    dataIndex: 'courseName',
    key: 'courseName'
  },
  {
    title: '课程代码',
    dataIndex: 'courseCode',
    key: 'courseCode'
  },
  {
    title: '限制说明',
    dataIndex: 'description',
    key: 'description'
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' }
  }
]

const courseData = [
  {
    key: '1',
    courseName: '高等数学（上）	',
    courseCode: 'MATH101',
    target: '工业机器人技术',
    description: '核心课程，不允许免修'
  },
  {
    key: '2',
    courseName: '工业设计',
    courseCode: 'CS201',
    target: '2022级所有专业',
    description: '专业基础课，不允许免修'
  }
]

const majorData = [
  {
    key: '1',
    major: '2024级工业机器人技术',
    courseName: '操作系统',
    courseCode: 'CS301',
    description: '专业核心课，不允许免修'
  },
  {
    key: '2',
    major: '2024级大数据技术',
    courseName: '人工智能基础',
    courseCode: 'SE301',
    description: '专业核心课，不允许免修'
  }
]

const courses = [
  { id: '1', name: '高等数学（上）	', code: 'MATH101' },
  { id: '2', name: '数据结构', code: 'CS201' },
  { id: '3', name: '操作系统', code: 'CS301' },
  { id: '4', name: '软件工程', code: 'SE301' }
]

const majors = [
  { id: '1', grade: '2022', name: '计算机科学与技术' },
  { id: '2', grade: '2022', name: '软件工程' },
  { id: '3', grade: '2021', name: '计算机科学与技术' },
  { id: '4', grade: '2021', name: '软件工程' }
]

const targets = [
  { id: '1', name: '计算机科学与技术专业' },
  { id: '2', name: '软件工程专业' },
  { id: '3', name: '2022级所有专业' },
  { id: '4', name: '2021级所有专业' }
]

export default {
  beforeCreate() {
    this.form = this.$form.createForm(this)
  },
  data() {
    return {
      courseColumns,
      majorColumns,
      courseData,
      majorData,
      courses,
      majors,
      targets,
      loading: false,
      pagination: {
        pageSize: 10
      },
      modalVisible: false,
      modalTitle: '新增限制',
      restrictionType: 'course',
      currentRecord: null
    }
  },
  methods: {
    handleAddCourseRestriction() {
      this.restrictionType = 'course'
      this.modalTitle = '新增课程限制'
      this.currentRecord = null
      this.modalVisible = true
      this.$nextTick(() => {
        this.form.resetFields()
      })
    },
    handleAddMajorRestriction() {
      this.restrictionType = 'major'
      this.modalTitle = '新增专业限制'
      this.currentRecord = null
      this.modalVisible = true
      this.$nextTick(() => {
        this.form.resetFields()
      })
    },
    handleEditCourseRestriction(record) {
      this.restrictionType = 'course'
      this.modalTitle = '编辑课程限制'
      this.currentRecord = record
      this.modalVisible = true
      this.$nextTick(() => {
        this.form.setFieldsValue({
          course: record.key,
          target: '1',
          description: record.description
        })
      })
    },
    handleEditMajorRestriction(record) {
      this.restrictionType = 'major'
      this.modalTitle = '编辑专业限制'
      this.currentRecord = record
      this.modalVisible = true
      this.$nextTick(() => {
        this.form.setFieldsValue({
          major: record.key,
          target: '1',
          description: record.description
        })
      })
    },
    handleDeleteCourseRestriction(record) {
      this.$confirm({
        title: '确认删除限制?',
        content: '确定要删除这条免修限制吗?',
        onOk: () => {
          this.$message.success('限制已删除')
        }
      })
    },
    handleDeleteMajorRestriction(record) {
      this.$confirm({
        title: '确认删除限制?',
        content: '确定要删除这条免修限制吗?',
        onOk: () => {
          this.$message.success('限制已删除')
        }
      })
    },
    handleModalOk() {
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('提交的限制:', values)
          this.$message.success('限制设置成功')
          this.modalVisible = false
        }
      })
    },
    handleModalCancel() {
      this.modalVisible = false
    }
  }
}
</script>